import React, { Component } from 'react';
//标签页
import { Tabs, Table, Modal, Select, DatePicker, Button, Icon, Input, Popover, Radio, message } from 'antd';
import moment from 'moment';
import { appealList, confirmAppeal } from "../assets/js/api";
//中文设置
import 'moment/locale/zh-cn';
//样式
import "../assets/css/appealMangement.css";


const RadioGroup = Radio.Group;
const { TextArea } = Input;

const { RangePicker } = DatePicker;
const TabPane = Tabs.TabPane;
const Option = Select.Option;


//用户反馈大容器
class AppealMangement extends Component {
    msgType(key) {
        console.log(key);
    };

    render() {
        return (
            <div className="msg">
                <div className="title">
                    申诉管理
                </div>
                <Tabs defaultActiveKey="1" onChange={this.msgType}>
                    <TabPane tab="未处理" key="1">
                        <UNDoneMsg></UNDoneMsg>
                    </TabPane>
                    <TabPane tab="已处理" key="2">
                        <DoneMsg></DoneMsg>
                    </TabPane>
                </Tabs>,
            </div>
        );
    }
}

function timeToStr(time) {
    //当时的时间信息
    let timeDate = new Date(time);
    let year = timeDate.getFullYear();
    let month = timeDate.getMonth() + 1;
    let date = timeDate.getDate();
    let hour = timeDate.getHours();
    let min = timeDate.getMinutes();

    //现在的时间信息
    let nowTime = new Date();
    let nowYear = nowTime.getFullYear();
    let nowMonth = nowTime.getMonth() + 1;
    let nowDate = nowTime.getDate();
    switch (true) {
        case ((nowYear === year) && (nowMonth === month) && (nowDate === date)):
            return (hour + ":" + min);
            break;
        case ((nowYear === year) && (nowMonth === month) && ((nowDate - date) === 1)):
            return ("昨天" + hour + ":" + min);
            break;
        case ((nowYear === year) && (nowMonth === month) && ((nowDate - date) === 2)):
            return ("前天" + hour + ":" + min);
            break;
        default:
            return (year + "-" + month + "-" + date + " " + hour + ":" + min);
    }
}

var initTime = getBackTime(7);

function getBackTime(times) {
    let time = new Date();
    let endTime = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
    time.setDate(time.getDate() - times);
    let startTime = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
    return [startTime, endTime]
}

class UNDoneMsg extends Component {
    changeTimeType(value) {
        let duration = getBackTime(value);
        let currTime = new Date();
        let hours = currTime.getHours() > 10 ? currTime.getHours() : '0' + currTime.getHours();
        let minutes = currTime.getMinutes() > 10 ? currTime.getMinutes() : '0' + currTime.getMinutes();
        let second = currTime.getSeconds() > 10 ? currTime.getSeconds() : '0' + currTime.getSeconds();
        let current = ' ' + hours + ':' + minutes + ':' + second;
        this.setState({
            endTime: duration[1] + current,
            starTime: duration[0] + ' 00:00:00',
        }, () => {
            this.getItem();
        })
    };

    disabledDate(current) {
        // 选择今天以前的
        return current && current > moment().endOf('day');
    }

    changeTime = (value, time) => {
        let endTime = time[1];
        let startTime = time[0];
        this.setState({
            starTime: startTime + ' 00:00:00',
            endTime: endTime + ' 23:59:59'
        }, () => {
            this.getItem();
        });
    };

    getItem = () => {
        let data = {
            startTime: this.state.starTime,
            endTime: this.state.endTime,
            disposeFlag: -1
        }
        appealList(data).then((res) => {
            let data = res.data;
            if (!data.ifsuccess) {
                message.error(data.msg);
                return
            };
            if (data.code == 10300) {
                message.error("登陆失效");
                // window.location.href = loginPath;
                return
            }
            if (data.code == 500) {
                message.warning(data.msg);
                return
            }
            if (data.code == 200) {
                let list = data.result;
                console.log(list);

                this.setState({
                    msgItems: list
                })
            }
        });
    }

    // 显示详细的投诉信息
    showMag = (data) => {
        this.setState({
            showMsgItem: {
                show: true,
                msgItem: data
            }
        })
    }


    closeModal = () => {
        this.setState({
            showMsgItem: {
                show: false,
                msgItem: {}
            }
        })
    }
    appealPassed = () => {
        this.setState({
            requestEnd: true
        })
        var reason
        try {
            reason = this.refs.reason.textAreaRef.value;
        } catch (error) {
            reason = '';
        }
        let data = {
            drivingLicenseId: this.state.showMsgItem.msgItem.drivingLicenseId,
            auditFlag: this.state.isPassAppeal,
            content: reason,
            drivingLicenseAppealId: this.state.showMsgItem.msgItem.drivingLicenseAppealId
        };
        console.log(1111111111111111);
        console.log(data);
        confirmAppeal(data).then((res) => {

            this.setState({
                requestEnd: true
            })
            let data = res.data;
            console.log(data);
            if (!data.ifsuccess) {
                message.error(data.msg);
                return
            };
            if (data.code == 10300) {
                message.error("登陆失效");
                // window.location.href = loginPath;
                return
            }
            if (data.code == 500) {
                message.warning(data.msg);
                return
            }
            if (data.code == 200) {
                message.success("操作成功");
                let index = 0;
                for (let i = 0; i < this.state.msgItems.length; i++) {
                    const data = this.state.msgItems[i];
                    if (data.drivingLicenseAppealId = this.state.showMsgItem.msgItem.drivingLicenseAppealId) {
                        index = i;
                        break;
                    }
                }
                let list = this.state.msgItems;
                this.setState({
                    showMsgItem: {
                        show: false,
                        msgItem: {},
                        msgItems: list.splice(index, 1),
                    },
                    requestEnd: false,
                })
            }
        })

    }

    isPassAppeal = (e) => {
        this.setState({
            isPassAppeal: e.target.value,
        });
    }


    constructor(props) {
        super(props);
        this.state = {
            dateFormat: "YYYY-MM-DD",
            starTime: initTime[0] + ' 00:00:00',
            endTime: initTime[1] + ' 23:59:59',
            msgItems: [],
            showMsgItem: {
                show: false,
                msgItem: {},
            },
            requestEnd: false,
            isPassAppeal: -1,

            columns: [{
                title: '账号',
                dataIndex: 'phone',
                key: 'phone',
            }, {
                title: '身份证-正面',
                dataIndex: 'identityCardFrontUri',
                key: 'identityCardFrontUri',
                render: (text, record) => {
                    return (
                        <span className="info">{record.identityCardFrontUri ? "已上传" : "未上传"}</span>
                    );
                },
            }, {
                title: '身份证-反面',
                dataIndex: 'identityCardContraryUri',
                key: 'identityCardContraryUri',
                render: (text, record) => {
                    return (
                        <span className="info">{record.identityCardContraryUri ? "已上传" : "未上传"}</span>
                    );
                },
            }, {
                title: '行驶证',
                dataIndex: 'drivingLicenseUri',
                key: 'drivingLicenseUri',
                render: (text, record) => {
                    return (
                        <span className="info">{record.drivingLicenseUri ? "已上传" : "未上传"}</span>
                    );
                },
            }, {
                title: '申诉理由',
                dataIndex: 'content',
                key: 'content',
                render: (text, record) => {
                    var content = (<div>
                        <p className="reasonContainer"><span>{record.content}</span></p>
                    </div>)
                    return (
                        <Popover content={content} title="申诉理由" trigger="hover">
                            <span className="info">详情</span>
                        </Popover>
                    );
                },
            }, {
                title: '操作',
                dataIndex: 'operating',
                key: 'operating',
                render: (text, record) => {
                    return (
                        <Button
                            disabled={!record.identityCardFrontUri || !record.identityCardContraryUri || !record.drivingLicenseUri}
                            onClick={() => { this.showMag(record) }}
                        >
                            操作
                         </Button>
                    );
                },
            },
            ],

        };
        this.changeTimeType = this.changeTimeType.bind(this);
    }
    componentDidMount = () => {
        let data = {
            startTime: this.state.starTime,
            endTime: this.state.endTime,
            disposeFlag: -1
        }
        appealList(data).then((res) => {
            let data = res.data;
            if (!data.ifsuccess) {
                message.error(data.msg);
                return
            };
            if (data.code == 10300) {
                message.error("登陆失效");
                // window.location.href = loginPath;
                return
            }
            if (data.code == 500) {
                message.warning(data.msg);
                return
            }
            if (data.code == 200) {
                let list = data.result;
                this.setState({
                    msgItems: list
                })
            }
        });
    };
    render() {
        return (
            <div className="allMsgContainer">
                <div className="timePicker">
                    <span className="timeType">
                        <Select defaultValue="7" style={{ width: 120 }} onChange={this.changeTimeType}>
                            <Option value="7">最近七天</Option>
                            <Option value="15">最近十五天</Option>
                            <Option value="30">最近一个月</Option>
                        </Select>
                    </span>
                    <span className="timeMsg">
                        <RangePicker
                            allowClear={false}
                            value={[moment(this.state.starTime, this.state.dateFormat), moment(this.state.endTime, this.state.dateFormat)]}
                            format={this.state.dateFormat} onChange={this.changeTime} disabledDate={this.disabledDate}
                        />
                    </span>
                </div>

                {/*投诉消息部分*/}
                <div className="msgs">
                    <div className="msgItems">
                        <Table
                            dataSource={this.state.msgItems}
                            columns={this.state.columns}
                            rowKey={record => record.drivingLicenseAppealId}
                        />
                    </div>
                </div>



                {/* 弹框 */}
                {this.state.showMsgItem.show ?
                    <Modal
                        title="详细信息"
                        width={800}
                        visible={this.state.showMsgItem.show}
                        onOk={this.closeModal}
                        onCancel={this.closeModal}
                        footer={
                            <div className="deleteBtn">
                                <Button key="back"
                                    onClick={this.closeModal}
                                    disabled={this.state.requestEnd}
                                >
                                    取消
                            </Button>
                                <Button key="submit"
                                    onClick={this.appealPassed}
                                    disabled={this.state.requestEnd}
                                    loading={this.state.requestEnd}
                                    type="primary">
                                    确定
                           </Button>
                            </div>}
                    >
                        <div className="licenceContainer">
                            <div className="lincesItem">
                                <span className="lable">
                                    身份证-正面:
                                </span>
                                <img className="linceImg" src={this.state.showMsgItem.msgItem.identityCardFrontUri} alt="身份证正面" />
                            </div>
                            <div className="lincesItem">
                                <span className="lable">
                                    身份证-反面:
                                </span>
                                <img className="linceImg" src={this.state.showMsgItem.msgItem.identityCardContraryUri} alt="身份证正面" />
                            </div>
                            <div className="lincesItem">
                                <span className="lable">
                                    行驶证:
                                </span>
                                <img className="linceImg" src={this.state.showMsgItem.msgItem.drivingLicenseUri} alt="身份证正面" />
                            </div>



                            <div className="lincesItem">
                                <span className="lable">
                                    申诉车牌号:
                                </span>
                                <p className="lableValue">
                                    {this.state.showMsgItem.msgItem.plateNo}
                                </p>
                            </div>
                            <div className="lincesItem">
                                <span className="lable">
                                    申诉理由:
                                </span>
                                <p className="lableValue">
                                    {this.state.showMsgItem.msgItem.content}
                                </p>
                            </div>

                            <div className="lincesItem">
                                <span className="lable">
                                    是否审核通过:
                                </span>
                                <div className="lableValue">
                                    <RadioGroup onChange={this.isPassAppeal} value={this.state.isPassAppeal}>
                                        <Radio value={-1}>不通过</Radio>
                                        <Radio value={1}>通过</Radio>
                                    </RadioGroup>
                                </div>
                            </div>


                            {/* 不通过理由 */}
                            {this.state.isPassAppeal == -1 ? <div className="lincesItem">
                                <span className="lable">
                                    不通过理由:
                                </span>
                                <div className="lableValue">
                                    <TextArea ref="reason" rows={4} autosize={false} id="TextArea" />
                                </div>
                            </div> : null}

                        </div>

                    </Modal> : null
                }
            </div>
        )
    }
}









class DoneMsg extends Component {
    changeTimeType(value) {
        let duration = getBackTime(value);
        let currTime = new Date();
        let hours = currTime.getHours() > 10 ? currTime.getHours() : '0' + currTime.getHours();
        let minutes = currTime.getMinutes() > 10 ? currTime.getMinutes() : '0' + currTime.getMinutes();
        let second = currTime.getSeconds() > 10 ? currTime.getSeconds() : '0' + currTime.getSeconds();
        let current = ' ' + hours + ':' + minutes + ':' + second;
        this.setState({
            endTime: duration[1] + current,
            starTime: duration[0] + ' 00:00:00',
        }, () => {
            this.getItem();
        });
    };

    disabledDate(current) {
        // 选择今天以前的
        return current && current > moment().endOf('day');
    }

    changeTime = (value, time) => {
        let endTime = time[1];
        let startTime = time[0];
        this.setState({
            starTime: startTime + ' 00:00:00',
            endTime: endTime + ' 23:59:59'
        }, () => {
            this.getItem();
        });
    };

    getItem = () => {
        let data = {
            startTime: this.state.starTime,
            endTime: this.state.endTime,
            disposeFlag: 1
        }
        appealList(data).then((res) => {
            let data = res.data;
            if (!data.ifsuccess) {
                message.error(data.msg);
                return
            };
            if (data.code == 10300) {
                message.error("登陆失效");
                // window.location.href = loginPath;
                return
            }
            if (data.code == 500) {
                message.warning(data.msg);
                return
            }
            if (data.code == 200) {
                let list = data.result;
                this.setState({
                    msgItems: list
                })
            }

        });
    }


    // 显示详细的投诉信息
    showMag = (data) => {
        console.log(data);

        this.setState({
            showMsgItem: {
                show: true,
                msgItem: data
            }
        })
    }


    closeModal = () => {
        this.setState({
            showMsgItem: {
                show: false,
                msgItem: {}
            }
        })
    }

    isPassAppeal = (e) => {
        this.setState({
            isPassAppeal: e.target.value,
        });
    }

    constructor(props) {
        super(props);
        this.state = {
            dateFormat: "YYYY-MM-DD",
            starTime: initTime[0] + ' 00:00:00',
            endTime: initTime[1] + ' 23:59:59',
            msgItems: [],

            showMsgItem: {
                show: false,
                msgItem: {},
            },

            showMsgItem: {
                show: false,
                msgItem: {},
            },

            columns: [{
                title: '账号',
                dataIndex: 'phone',
                key: 'phone',
            }, {
                title: '身份证-正面',
                dataIndex: 'identityCardFrontUri',
                key: 'identityCardFrontUri',
                render: (text, record) => {
                    return (
                        <span className="info">{record.identityCardFrontUri ? "已上传" : "未上传"}</span>
                    );
                },
            }, {
                title: '身份证-反面',
                dataIndex: 'identityCardContraryUri',
                key: 'identityCardContraryUri',
                render: (text, record) => {
                    return (
                        <span className="info">{record.identityCardContraryUri ? "已上传" : "未上传"}</span>
                    );
                },
            }, {
                title: '行驶证',
                dataIndex: 'drivingLicenseUri',
                key: 'drivingLicenseUri',
                render: (text, record) => {
                    return (
                        <span className="info">{record.drivingLicenseUri ? "已上传" : "未上传"}</span>
                    );
                },
            }, {
                title: '申诉理由',
                dataIndex: 'content',
                key: 'content',
                render: (text, record) => {
                    var content = (<div>
                        <p className="reasonContainer"><span>{record.content}</span></p>
                    </div>)
                    return (
                        <Popover content={content} title="申诉理由" trigger="hover">
                            <span className="info">详情</span>
                        </Popover>
                    );
                },
            }, {
                title: '操作',
                dataIndex: 'operating',
                key: 'operating',
                render: (text, record) => {
                    return (
                        <Button
                            disabled={!record.identityCardFrontUri || !record.identityCardContraryUri || !record.drivingLicenseUri}
                            onClick={() => { this.showMag(record) }}
                        >
                            操作
                         </Button>
                    );
                },
            },
            ],

        };
        this.changeTimeType = this.changeTimeType.bind(this);
    }


    componentDidMount = () => {
        let data = {
            startTime: this.state.starTime,
            endTime: this.state.endTime,
            disposeFlag: 1
        }
        appealList(data).then((res) => {
            let data = res.data;
            if (!data.ifsuccess) {
                message.error(data.msg);
                return
            };
            if (data.code == 10300) {
                message.error("登陆失效");
                // window.location.href = loginPath;
                return
            }
            if (data.code == 500) {
                message.warning(data.msg);
                return
            }
            if (data.code == 200) {
                let list = data.result;
                this.setState({
                    msgItems: list
                })
            }
        });
    };

    render() {
        return (
            <div className="allMsgContainer">
                <div className="timePicker">
                    <span className="timeType">
                        <Select defaultValue="7" style={{ width: 120 }} onChange={this.changeTimeType}>
                            <Option value="7">最近七天</Option>
                            <Option value="15">最近十五天</Option>
                            <Option value="30">最近一个月</Option>
                        </Select>
                    </span>
                    <span className="timeMsg">
                        <RangePicker
                            allowClear={false}
                            value={[moment(this.state.starTime, this.state.dateFormat), moment(this.state.endTime, this.state.dateFormat)]}
                            format={this.state.dateFormat} onChange={this.changeTime} disabledDate={this.disabledDate}
                        />
                    </span>
                </div>

                {/*投诉消息部分*/}
                <div className="msgs">
                    <div className="msgItems">

                        {/* 投诉信息列表 */}
                        <Table
                            dataSource={this.state.msgItems}
                            columns={this.state.columns}
                            rowKey={record => record.drivingLicenseAppealId}
                        />
                    </div>
                </div>



                {/* 弹框 */}
                {this.state.showMsgItem.show ?
                    <Modal
                        title="详细信息"
                        width={800}
                        visible={this.state.showMsgItem.show}
                        onOk={this.closeModal}
                        onCancel={this.closeModal}
                        footer={
                            <div className="deleteBtn">
                                <Button key="back" onClick={this.closeModal}>
                                    取消
                        </Button>
                                <Button key="submit" onClick={this.closeModal} type="primary">
                                    确定
                       </Button>
                            </div>}
                    >
                        <div className="licenceContainer">
                            <div className="lincesItem">
                                <span className="lable">
                                    身份证-正面:
                                </span>
                                <img className="linceImg" src={this.state.showMsgItem.msgItem.identityCardFrontUri} alt="身份证正面" />
                            </div>
                            <div className="lincesItem">
                                <span className="lable">
                                    身份证-反面:
                                </span>
                                <img className="linceImg" src={this.state.showMsgItem.msgItem.identityCardContraryUri} alt="身份证正面" />
                            </div>
                            <div className="lincesItem">
                                <span className="lable">
                                    行驶证:
                                </span>
                                <img className="linceImg" src={this.state.showMsgItem.msgItem.drivingLicenseUri} alt="身份证正面" />
                            </div>



                            <div className="lincesItem">
                                <span className="lable">
                                    申诉车牌号:
                            </span>
                                <p className="lableValue">
                                    {this.state.showMsgItem.msgItem.plateNo}
                                </p>
                            </div>
                            <div className="lincesItem">
                                <span className="lable">
                                    申诉理由:
                            </span>
                                <p className="lableValue">
                                    {this.state.showMsgItem.msgItem.content}
                                </p>
                            </div>

                            <div className="lincesItem">
                                <span className="lable">
                                    是否审核通过:
                            </span>
                                <div className="lableValue">
                                    {this.state.showMsgItem.msgItem.status==1?"正在申诉":""}
                                    {this.state.showMsgItem.msgItem.status==2?"审核通过":""}
                                    {this.state.showMsgItem.msgItem.status==3?"审核不通过":""}
                                </div>
                            </div>


                            {/* 不通过理由 */}
                            {this.state.showMsgItem.msgItem.status== 3 ? <div className="lincesItem">
                                <span className="lable">
                                    不通过理由:
                            </span>
                                <div className="lableValue">
                                    {this.state.showMsgItem.msgItem.auditResult}
                                </div>
                            </div> : null}

                        </div>

                    </Modal> : null
                }
            </div>
        )
    }
}


export default AppealMangement;

